<template>
    <div class="girls" v-if="AllData !== null">
        <!-- 轮播图 -->
        <div class="Banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in BannerData" :key="index">
                    <img :src="item.cover" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 小编力荐 -->
        <div class="tips">
            <div class="title">{{ AllData[1].name }}</div>
            <div class="tips-item" v-for="(item, index) in TipsData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 连载追更 -->
        <div class="series">
            <div class="title">{{ AllData[2].name }}</div>
            <div class="series-item" v-for="(item, index) in SeriesData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 24小时人气榜 -->
        <div class="hours">
            <div class="title">{{ AllData[3].name }}</div>
            <div class="item-box">
                <div class="item" v-for="(item, index) in HoursData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <b :class="'icon_' + `${index + 1}`"></b>
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="name">{{ item.title }}</div>
                    <div class="click">{{ item.clickCount }}点击</div>
                </div>
            </div>
            <div class="more-icon" @click="goTopClassify">
                <div class="more">查看榜单</div>
                <div class="img-box icon-more">
                    <img class="img-auto" src="../assets/images/more.png" />
                </div>
            </div>
        </div>
        <!-- 完本畅读 -->
        <div class="end">
            <div class="title">{{ AllData[4].name }}</div>
            <div class="end-item" v-for="(item, index) in EndData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 新书独家 -->
        <div class="NewsBook">
            <div class="title">{{ AllData[5].name }}</div>
            <div class="NewsBook-item-box">
                <div class="NewsBook-item" v-for="(item, index) in NewsBookData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                        <div class="name">{{ item.title }}</div>
                        <div class="author">{{ item.author }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 潜力IP -->
        <div class="potential">
            <div class="title">{{ AllData[6].name }}</div>
            <div class="potential-item-box">
                <div class="potential-item" v-for="(item, index) in PotentialData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                        <div class="name">{{ item.title }}</div>
                        <div class="author">{{ item.author }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 女生完结榜 -->
        <div class="GirlsEnd">
            <div class="title">{{ AllData[7].name }}</div>
            <div class="item-box">
                <div class="item" v-for="(item, index) in GirlsEndData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <b :class="'icon_' + `${index + 1}`"></b>
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="name">{{ item.title }}</div>
                </div>
            </div>
            <div class="more-icon" @click="goTopClassify">
                <div class="more">查看榜单</div>
                <div class="img-box icon-more">
                    <img class="img-auto" src="../assets/images/more.png" />
                </div>
            </div>
        </div>
        <!-- 现代言情 -->
        <div class="Romance">
            <div class="title">{{ AllData[8].name }}</div>
            <div class="Romance-item-box clearfix">
                <div class="Romance-item" v-for="(item, index) in RomanceData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="RigMsg">
                        <div class="name">{{ item.title }}</div>
                        <div class="type">{{ item.category }}</div>
                        <div class="icon-read">
                            <van-icon name="eye-o" class="eye" />
                            <div class="read">{{ item.clickCount }}w</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 古代言情 -->
        <div class="Ancient">
            <div class="title">{{ AllData[9].name }}</div>
            <div class="Ancient-item-box clearfix">
                <div class="Ancient-item" v-for="(item, index) in AncientData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                    </div>
                    <div class="RigMsg">
                        <div class="name">{{ item.title }}</div>
                        <div class="type">{{ item.category }}</div>
                        <div class="icon-read">
                            <van-icon name="eye-o" class="eye" />
                            <div class="read">{{ item.clickCount }}w</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">我是有底线的(*^▽^*)</div>
    </div>
</template>

<script>
import { getGirls } from "../api/GirlsData.js";
export default {
    name: "Girls",
    data() {
        return {
            AllData: null,
            // 轮播图
            BannerData: null,
            // 小编力荐
            TipsData: null,
            // 连载追更
            SeriesData: null,
            // 24小时人气榜
            HoursData: null,
            // 完本畅读
            EndData: null,
            // 新书独家
            NewsBookData: null,
            // 潜力IP
            PotentialData: null,
            // 女生完结榜
            GirlsEndData: null,
            // 现代言情
            RomanceData: null,
            // 古代言情
            AncientData: null,
        };
    },
    created() {
        this.getGirls();
    },
    methods: {
        getGirls() {
            this.axios({
                method: "get",
                url: "store/show.json",
                params: {
                    type: "femail",
                    uuid: "017de2274aa5400e9dabe30f173e98d9",
                },
            })
                .then((res) => {
                    this.AllData = res.data.data.list;

                    // 轮播图
                    this.BannerData = this.AllData[0].banners;
                    // 小编力荐
                    this.TipsData = this.AllData[1].list;
                    // 连载追更
                    this.SeriesData = this.AllData[2].list;
                    // 24小时人气榜
                    this.HoursData = this.AllData[3].list;
                    // 完本畅读
                    this.EndData = this.AllData[4].list;
                    // 新书独家
                    this.NewsBookData = this.AllData[5].list;
                    // 潜力IP
                    this.PotentialData = this.AllData[6].list;
                    // 女生完结榜
                    this.GirlsEndData = this.AllData[7].list;
                    // 现代言情
                    this.RomanceData = this.AllData[8].list;
                    // 修改点击量(取整保留一位小数)
                    this.RomanceData.forEach((item) => {
                        item.clickCount = Number((item.clickCount / 10000).toFixed(1));
                    });
                    // 古代言情
                    this.AncientData = this.AllData[9].list;
                    // 修改点击量(取整保留一位小数)
                    this.AncientData.forEach((item) => {
                        item.clickCount = Number((item.clickCount / 10000).toFixed(1));
                    });
                })
                .catch((err) => {
                    err;
                });
        },
        // 跳转书籍详情
        goBookDetails(BookId, title) {
            this.$router.push({
                name: "BookDetails",
                query: {
                    BookId,
                    title,
                },
            });
        },
        goTopClassify() {
            this.$router.push({
                name: "TopClassify",
            });
        },
    },
};
</script>

<style lang="less" scoped>
.girls {
    height: 522px;
    overflow-y: auto;
    background-color: #f7f8f8;
    // 去掉滚动条
    &::-webkit-scrollbar {
        display: none;
    }
    .foot {
        width: 100%;
        height: 40px;
        background-color: #ecefef;
        text-align: center;
        line-height: 40px;
    }
    .Romance,
    .Ancient {
        width: 350px;
        margin: 0 auto;
        .Romance-item-box,
        .Ancient-item-box {
            width: 100%;
            border-bottom: 1px solid #e5eaea;
            padding-bottom: 15px;
            .Romance-item,
            .Ancient-item {
                width: 50%;
                float: left;
                margin-top: 15px;
                .img-box {
                    width: 38%;
                    display: inline-block;
                }
                .RigMsg {
                    width: 56%;
                    float: right;
                    .name {
                        font-size: 14px;
                        font-weight: 700;
                        margin: 0 0 10px 0;
                    }
                    .type {
                        margin: 0 0 20px 0;
                        color: #686969;
                    }
                    .icon-read {
                        display: flex;
                        .read {
                            color: #686969;
                        }
                        .eye {
                            margin: 0 5px 0 0;
                        }
                    }
                }
            }
        }
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 0px 5px;
        }
    }
    .Banner {
        width: 350px;
        // background-color: pink;
        margin: 10px auto;
        .van-swipe-item {
            text-align: center;
            img {
                width: 96%;
                display: inline-block;
            }
        }
        ::v-deep {
            .van-swipe__indicators {
                position: fixed;
                bottom: 8px;
                left: 8%;
            }
        }
    }
    .potential,
    .NewsBook {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 40px;

        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 5px 5px;
        }
        .potential-item-box,
        .NewsBook-item-box {
            width: 350px;
            margin: 0 auto;
            display: flex;
            margin-bottom: 80px;
            .potential-item,
            .NewsBook-item {
                width: 25%;
                margin-right: 17px;
                .img-box {
                    width: 100%;
                    height: 80px;
                }
                .name {
                    width: 74px;
                    font-size: 14px;
                    margin: 5px 0;
                }
                .author {
                    color: #686969;
                }
            }
        }
    }
    .tips,
    .series,
    .end {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 5px;
        margin-left: 20px;
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 -5px 0;
        }
        .tips-item,
        .series-item,
        .end-item {
            width: 100%;
            margin: 15px auto;
            display: flex;
            .img-box {
                width: 20%;
                height: 100px;
            }
            .RigMsg {
                width: calc(80% - 15px);
                margin-left: 10px;
                .name {
                    font-size: 16px;
                    font-weight: 700;
                    margin-bottom: 5px;
                }
                .author-type {
                    color: #686969;
                    margin-bottom: 15px;
                }
                .desc {
                    // 给容器元素类型转换为
                    display: -webkit-box;
                    // 设置弹性盒子垂直排列
                    -webkit-box-orient: vertical;
                    // 控制要显示的行数
                    -webkit-line-clamp: 2;
                    // 溢出隐藏
                    overflow: hidden;
                    text-align-last: left;
                    color: #686969;
                }
            }
        }
    }
    .hours {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        .more-icon {
            display: flex;
            .more {
                width: 50px;
                color: #686969;
                display: block;
                margin: 20px auto;
            }
            .icon-more {
                position: relative;
                width: 16px;
                height: 16px;
                top: 20px;
                left: -140px;
            }
        }
        .item-box {
            width: 350px;
            margin: 0 auto;
            display: flex;
            margin-bottom: 15px;
            .item {
                width: calc(33.333%);
                margin-right: 18px;
                position: relative;
                b {
                    position: absolute;
                    top: -12px;
                    left: 0px;
                    right: 0;
                    width: 100%;
                    height: 40px;
                    z-index: 9;
                }
                .icon_1 {
                    background: url(../assets/images/icon_1.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .icon_2 {
                    background: url(../assets/images/icon_2.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .icon_3 {
                    background: url(../assets/images/icon_3.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .img-box {
                    width: 100%;
                    height: 90%;
                }
                .name {
                    width: 100%;
                    height: 13%;
                }
                .click {
                    color: #686969;
                }
            }
        }
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
    }

    .GirlsEnd {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        .more-icon {
            display: flex;
            .more {
                width: 50px;
                color: #686969;
                display: block;
                margin: 20px auto;
            }
            .icon-more {
                position: relative;
                width: 16px;
                height: 16px;
                top: 20px;
                left: -140px;
            }
        }
        .item-box {
            width: 350px;
            margin: 0 auto;
            display: flex;
            .item {
                width: calc(33.333%);
                margin-right: 18px;
                position: relative;
                b {
                    position: absolute;
                    top: -12px;
                    left: 0px;
                    right: 0;
                    width: 100%;
                    height: 40px;
                    z-index: 9;
                }
                .icon_1 {
                    background: url(../assets/images/icon_1.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .icon_2 {
                    background: url(../assets/images/icon_2.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .icon_3 {
                    background: url(../assets/images/icon_3.png) 0 0 no-repeat;

                    background-size: 100% auto;
                }
                .img-box {
                    width: 100%;
                    height: 80%;
                }
                .name {
                    width: 100%;
                    height: 13%;
                    margin-bottom: 1px;
                }
            }
        }
        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 15px 0;
        }
    }
}
</style>
